import React, { useEffect, useState } from 'react';
import { Row, Col, message } from 'antd';
import { detail as getDetail } from '@/services/Budget';
import styles from './index.less';
import { useLocation } from 'umi'

const DetailHeader = () => {
  const [detail, setDetail] = useState({});
  const location = useLocation();

  useEffect(() => {
    getDetailById()
  }, []);

  const getDetailById = async () => {
    try {
      const { id } = location.query;
      if (!id) throw new Error('非法请求');
      const res = await getDetail(id);
      setDetail(res);
    } catch (e) {
      e.message ? message.error(e.message) : null
    }
  };

  return (
    <React.Fragment>
      <Row gutter={16} style={{ marginBottom: 16 }} className={styles.headerContainer}>
        <Col span={6}><span>创建时间：</span>{detail.createTime}</Col>
        <Col span={6}><span>调拨人：</span>{detail.name}</Col>
        <Col span={6}><span>预订种数：</span>{detail.numCategory || '--'}</Col>
        <Col span={6}><span>预订册数：</span>{detail.numItems}</Col>
      </Row>
      <Row gutter={16} className={styles.headerContainer}>
        <Col span={6}><span>预算：</span>{detail.code}</Col>
        <Col span={12}>
          <span>注：</span>预算金额：{detail.amount}，已用金额：{detail.useAmount}
          {detail.restAmount ? `，剩余金额：${detail.restAmount}` : null}
        </Col>
        <Col span={6}><span>备注：</span>{detail.remark || '--'}</Col>
      </Row>
    </React.Fragment>
  )
}

export default DetailHeader